.nav-bar {
    .com-nav-bar {
        padding-bottom: 10rpx;
        display: flex;
        align-items: center;

        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 90;
        background:
            linear-gradient(to bottom, transparent, #fff 400rpx), linear-gradient(to right, #d2eef9 20%, #ffd1df);

        .title {
            margin-left: 2.5%;
            font-weight: 550;
            font-size: 50rpx;
            line-height: 1em;
            color: #000;
        }

        .search {
            width: 220rpx;
            height: 60rpx;
            margin-left: 30rpx;
            padding: 0 0 0 15rpx;
            box-sizing: border-box;
            border: #fff 1rpx solid;
            border-radius: 60rpx;
            background-color: rgba(255, 255, 255, 0.4);
            display: flex;
            align-items: center;

            .text {
                font-size: 30rpx;
                line-height: 1em;
                color: #a7a7a7;
                margin-left: 10rpx;
            }
        }
    }

    .fill {
        padding-bottom: 10rpx;
    }
}
